<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue作用域插槽</title>
    <script src="../../vue.js"></script>
</head>

<body>
    <div id="app">
        <child>
            <template slot-scope="props"> <!-- 4. 使用template标签,这个是固定模式,就得这么写,然后固定的属性slot-scope,值不固定,随便起 -->
                <h1>{{props.item}}</h1> <!-- 5. 使用插值表达式将要展示的数据拿出来,就需要用template标签上的固定数据值.模板中的item即可. h1标签只是为了将展示的值变大 -->
            </template>
        </child>
    </div>

    <!--  
        6. 解释一下什么是作用域插槽：
                以这个demo举例，要循环展示数据，但是循环出来的样式,值怎么展示,以什么样的样子展示,不能写死在模板中,需要按照特定的需求设定或者更改,
                这时候就需要用到作用域插槽了. 模板中只配置值的循环并绑定,展示的方式完全又标签那里进行控制,像demo中使用了h1标签让值变大就是,想怎么搞
                完全在标签那里控制,但是获取值的方式是固定的,就是用template标签和slot-scope标签
     -->

    <script>
        Vue.component('child', { // 1. 定义组件
            data() { // 2. 设置要循环的数据
                return {
                    list: [1, 2, 3, 4, 5]
                }
            },
            // 3. 设置模板,因为数据需要循环出来,需要在模板中循环,然后将循环的结果绑定到模板中(:item=item),后面说为什么
            template: `<div>
                            <ul>
                                <slot v-for="item of list" :item=item></slot>
                            </ul>
                       </div>`
        })

        const app = new Vue({
            el: '#app',

        })
    </script>
</body>

</html>